<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header :addTodo="addTodo" />
      <ListItem
        :todos="todos"
        :updateTodo="updateTodo"
        :deleteTodo="deleteTodo"
        v-show="!!todos.length"
      />
      <Footer
        :todos="todos"
        :updateTodos="updateTodos"
        :deleteTodos="deleteTodos"
        :isDoneCount="isDoneCount"
        :totalCount="totalCount"
        v-show="!!todos.length"
      />
      <h1 :style="{ color: 'red' }" v-show="!todos.length">
        恭喜您,全部任务已完成
      </h1>
    </div>
  </div>
</template>

<script>
import Header from './views/Header'
import ListItem from './views/ListItem'
import Footer from './views/Footer'

export default {
  name: 'App',
  data() {
    return {
      todos: [
        { id: 1, name: 'eat', isDone: false },
        { id: 2, name: 'code', isDone: false },
        { id: 3, name: 'sleep', isDone: false },
        { id: 4, name: 'game', isDone: false },
      ],
    }
  },
  computed: {
    isDoneCount() {
      return this.todos.reduce((prev, todo) => {
        return prev + (todo.isDone ? 1 : 0)
      }, 0)
    },
    totalCount() {
      return this.todos.length
    },
  },
  methods: {
    addTodo(name) {
      this.todos.unshift({ id: Date.now(), name, isDone: false })
    },
    updateTodo(id) {
      const todo = this.todos.find((item) => item.id === id)
      todo.isDone = !todo.isDone
    },
    deleteTodo(id) {
      this.todos = this.todos.filter((item) => item.id !== id)
    },
    updateTodos(isChecked) {
      this.todos.forEach((todo) => {
        if (todo.isDone != isChecked) {
          todo.isDone = isChecked
        }
      })
    },
    deleteTodos() {
      this.todos = this.todos.filter((item) => !item.isDone)
    },
  },
  components: {
    Header,
    ListItem,
    Footer,
  },
}
</script>

<style>
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
